<template>
  <div class="person">

    <h1>监视情况三：【reactive】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age}}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script setup lang="ts">

import { reactive, watch } from 'vue';
//数据
let person = reactive({
  name:"zhang3",
  age:17
})

//方法    
function changeName(){
  person.name += "~"
}
function changeAge(){
  person.age += 1
}

function changePerson(){
  /* 不行
  person = {
    name:"lisi",
    age:17  
  } */
  Object.assign(person,{name:"lisi",age:17})
}

// 默认开启深度监视deep：true
watch(person,(newValue,oldValue)=>{
  console.log("数据发生了变化",newValue,oldValue)
})
</script>

<style scoped>
.person {
  background-color: aqua;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>